<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
      
        .header{
            position: relative;
            height: 50px;
            background-color:black;
            margin-bottom: 13px;
        }
        .header1{
            width: 1226px;
            height: 50px;
            margin: 0 auto;
            
            

        }
        .header12{
            float: left;
            width: 500px;
            height: 50px;
            

        }
        .header16{
            float:right;
            width: 400px;
            height: 50px;
            
        }
        
        .header13{
            list-style: none;
        }
        .header14{
            font-size: 12px; 
            line-height: 50px;
            float: left;
            width: 70px;
            color: white;
        }
        .header14:hover{
            color: grey;
        }
        .header17{
            float: right;
            list-style: none;
            width:300px;
            
        }
        .header18{
            float: right;
            color: white;
            background-color: gray;
        }
        .header18:hover{
            background-color: white;
            color: orange;
            
        }
        .header19{
            
            width: 90px;
            height: 50px;
            text-align: center;
            line-height: 50px;

        }
        .header0{
            position: absolute;
            right:36px;
            width: 300px;
            height: 170px;
            background-color:white; 
            z-index: 1;
            display: none;
            border: 1px  solid orange;
            box-shadow: 0 0 20px 0 gray;
        }
        .header18:hover .header0{
            display: block;

        }
        #p{
            text-align: center;
            line-height: 180px;
            font-size: 15px;
            color: black;
        }
/* --------------------------------------------------------------------------------------------------------------------------- */
        .contain{
            width: 1226px;
            height: 120px;
            margin: 0 auto;
            margin-bottom: 13px;
        }
        .contain1{
            position: relative;
            float: left;
            width: 260px;
            height: 120px;

            
        }
        .contain12{
            position: absolute;
            top:20px;
            width: 80px;
            height: 80px;
            background-image: url(5.png);
            background-repeat: no-repeat;
            background-size: cover;  
        }
        .contain12:hover{
            background-image: url(6.png);

        }
        .contain2{
            float: left;
            width: 666px;
            height: 120px;
            
        }
        .contain22{
            width: 90px;
            list-style: none;
            color: black;
            font-size: 17px;
            text-align: center;
            line-height: 120px;
            float: left;
        }
        .contain22:hover{
            color: orangered;
  
        }
        .contain3{
            position: relative;
            float: left;
            width: 300px;
            height: 120px;

        }
        .contain31{
            position: absolute;
            top:40px;
            width: 200px;
            height: 40px;
            line-height: 120px;
            color: gray;
        }
        .contain32{
            width: 44px;
            height: 44px;
            background-color: orangered;
            position: absolute;
            bottom: 36px;
            left: 204px;
        }
        .contain32:hover{
            background-color: orange;
        }
/* ------------------------------------------------------------------------------------------------------------------------ */
        .border{
            width: 1226px;
            height: 460px;
            background-image: url(1.jpg);
            background-size: cover;
            margin: 0 auto;
            position: relative;
            margin-bottom: 13px;
        }
        .bor-l{
            width:260px;
            height: 460px;
            background-color: grey;
        }
        .bor-11{

            padding: 20px 0;
            list-style: none;
            
        }
        .bor-12{ 
            font-size: 15px;
            width: 240px;
            height: 40px;
            text-decoration: none;
            color: white;
            display: inline-block;
            line-height:40px ; 
            padding-left: 20px;
            background: url(arrow.png) no-repeat 200px 13px;
            
            
            
                 
        }
        .bor-12:hover{
            background-color: orange;
        }
        a{
            text-decoration: none;
        }
        .bor-21{
            width: 41.5px;
            height: 69px;
            background-image: url(arr.png);
            background-position: 41px;
            background-repeat: no-repeat;
            position: absolute;
            top: 196px;
            left: 260px;
            background-position: -83px 0;
            
        }
        .bor-22{
            width: 41.5px;
            height: 69px;
            background-image: url(arr.png);
            background-position: 41px;
            background-repeat: no-repeat;
            position: absolute;
            top: 196px;
            left: 1184.5px;
            background-position: -124.5px 0;
            
        }
        .bor-21:hover{
            background-position: 0 0;
        }
        .bor-22:hover{
            background-position: -41.5px 0;
        }
        .bor-3{
            width: 120px;
            height: 30px;
            
            position: absolute;
            bottom:30px;
            right: 50px;
        }
        .bor-31{
            width: 10px;
            height: 10px;
            background-color:grey;
            float: left;
            border-radius: 50%;
            margin-left: 8px;
            border: 2px solid white;
        }
        .bor-31:hover{
            background-color: honeydew;
        }
        .bor-13{
            width: 966px;
            height: 460px;
            background-color: white;
            position: absolute;
            left: 260px;
            bottom: 0px;
            display: none;
            z-index: 1;
        }
        .bor-131{
            position: relative;
            width: 220px;
            height: 72px;
            text-align: center;
            line-height: 72px;
            color: black;
            list-style: none;
            float: left;
        }
        .bor-131:hover{
            color: orange;
        }
        .bor-132{
            position: absolute;
            top:18px;
            left: 15px;
        }
        .bor-12:hover .bor-13{
            display: block;
        }
/* --------------------------------------------------------------------------------------------------------------------------- */
        .down{
            width: 1260px;
            height: 170px;
            background-color: orange;
        }
/* --------------------------------------------------------------------------------------------------------------------------*/
        .rc{
            width: 30px;
            height: 240px;
            
            position: fixed;
            right: 0px;
            top: 250px;
        }
        .rc1{
            font-size: 1px;
            list-style: none;
            height: 40px;
            margin: 0 auto;
        }
        .rc1:hover{
            color: orange;
            width: 1226px;
            height: 460px;
            
        }
        .down{
            width: 1226px;
            height: 180px;
            margin:0 auto;
            background-color: white;
        }
        .down1{
            width: 260px;
            height: 170px;
            
            float: left;
        }
        .down2{
            float: right;
            width: 966px;
            height: 170px;
        }
        .down21{
            width:316px;
            height: 170px;
            background-image: url(2.jpg);
            background-size: cover;
            list-style: none;
            float: right;
            margin-left: 2px;
        }
        .down22{
            width:316px;
            height: 170px;
            background-image: url(3.jpg);
            background-size: cover;
            list-style: none;
            float: right;
            margin-left: 2px;
        }
        .down23{
            width:316px;
            height: 170px;
            background-image: url(4.jpg);
            background-size: cover;
            list-style: none;
            float: right;
            margin-left: 2px;
        }
        .down12{
            position: relative;
            list-style: none;
            width: 86px;
            height: 85px;
            background-color: #757575;
            float: left;
            color: white;
            
        }
        .down12:hover{
            color: orange;
        }
        .down13{
            position: absolute;
            right:43px;
            top:20px;
            width: 20px;
            height: 20px;
        
        }
        .down14{
            position: absolute;
            top:40px;
            text-align: center;
        }
        .down14:hover{
            color: orange;
        }

    </style>
</head>
<!------------------------------------------------------------------------------------------------------------------- -->
<body>
    <!-- 导航栏 -->
    <div class="header">
        <div class="header1">
            <div class="header12">
            <ul class="header13">
              <a href="" class="header15"><li class="header14">小米商城</li></a>
              <a href="" class="header15"><li class="header14">MIUI</li></a>
              <a href="" class="header15"><li class="header14">IoT</li></a>
              <a href="" class="header15"><li class="header14">云服务</li></a>
              <a href="" class="header15"><li class="header14">金融</li></a>
              <a href="" class="header15"><li class="header14">企业团购</li></a>
            </ul>
            </div>
            <div class="header16">
            <ul class="header17">
                <a href="" class="header15"><li class="header14">登录</li></a>
                <a href="" class="header15"><li class="header14">注册</li></a>
                <a href="" class="header15"><li class="header14">消息通知</li></a>
                <a href="" class="header18"><li class="header19">购物车
                    <div class="header0"><p id="p">购物车中还没有商品 抓紧选购吧!</p></div>
                </li></a>
            </ul>

            </div>
        </div>
    </div>
    <!-- ------------------------------------------------------------------------------------------------------------------ -->
    <!-- 中间导航 -->
    <div class="contain">
        <div class="contain1">
            <div class="contain12"></div>
        </div>
        <div class="contain2">
        <ul>
            <a href="" class="contain23"><li class="contain22">小米手机</li></a>
            <a href="" class="contain23"><li class="contain22">小米手机</li></a>
            <a href="" class="contain23"><li class="contain22">小米手机</li></a>
            <a href="" class="contain23"><li class="contain22">小米手机</li></a>
            <a href="" class="contain23"><li class="contain22">小米手机</li></a>
            <a href="" class="contain23"><li class="contain22">小米手机</li></a>
        </ul>
        </div>
        <div class="contain3">
            <input type="text" value="饮水器" class="contain31">
            <a href=""><div class="contain32">
        
            </div>
            </a>

        </div>
    </div>
    <!-- ---------------------------------------------------------------------------------------------- ------------------>
    <!-- 外边框 -->
    <div class="border">
        <!-- 左边框 -->
        <div class="bor-l">
            <!-- 列表 -->
            <ul class="bor-11">
                <a href=""><li class="bor-12">手机 电话卡<div class="bor-13">
                    <ul>
                        <a href="">
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                            <li class="bor-131"><img src="0.webp.jpg" class="bor-132">Reidmi 10X 4G</li>
                        </a>
                    </ul>

                </div></li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
                <a href=""><li class="bor-12">手机 电话卡</li></a>
            </ul>
        </div>
        <!-- 箭头 -->
        <div class="bor-21"></div>
        <div class="bor-22"></div>
        <!-- 分页器 -->
         <div class="bor-3">
             <span class="bor-31"></span>
             <span class="bor-31"></span>
             <span class="bor-31"></span>
             <span class="bor-31"></span>
             <span class="bor-31"></span>
            </div>
        
        </div>
<!-- --------------------------------------------------------------------------------------------------------------------------- -->
       <!-- 右侧隐藏栏 -->
          <div class="rc">
          <ul>
              <a href=""><li class="rc1">手机APP</li></a>
              <a href=""><li class="rc1">手机APP</li></a>
              <a href=""><li class="rc1">手机APP</li></a>
              <a href=""><li class="rc1">手机APP</li></a>
              <a href=""><li class="rc1">手机APP</li></a>
          </ul>
        </div>
<!-- -------------------------------------------------------------------------------------------------------------------------/ -->
        <!-- 正下方   -->
        <div class="down">
            <div class="down1">
                <ul>
                    <a href="" ><li class="down12"><img src="7.png" class="down13"><p class="down14">小米秒杀</p></li></a>
                    <a href=""><li class="down12">小米秒杀</li></a>
                    <a href=""><li class="down12">小米秒杀</li></a>
                    <a href=""><li class="down12">小米秒杀</li></a>
                    <a href=""><li class="down12">小米秒杀</li></a>
                    <a href=""><li class="down12">小米秒杀</li></a>
                    
                </ul>
            </div>
            <div class="down2">
                <ul>
                    <a href=""><li class="down21"></li></a>
                    <a href=""><li class="down22"></li></a>
                    <a href=""><li class="down23"></li></a>
                </ul>
            </div>
            </div>
            
        </div>
</body>
</html>